<template>
	<view class="modal_showPreview" v-if="showPreview" @click="showPreview = false">
		<view class="content">
			<swiper class="swiper" circular :indicator-dots="true" indicator-active-color="#FE7F00" :autoplay="true" :current="0" :interval="8000" @click.stop="">
				<swiper-item v-for="(item,index) in imageData" >
					<view class="swiper_content">
						<image v-if="checkType(item)=='image'" class="swiper_img" :mode="'aspectFit'" :src="item"></image>
						<video class="swiper_video" v-if="checkType(item)=='video'" :src="item" :enable-progress-gesture="false" controls></video>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import { isQianfan, isWeiXin } from '@/until/QFH5.js'
	export default {
		props: {
			data: {
				type:Array
			},
			currentIndex:{
				type:String,
				default:''
			}
		},
		data(){
			return{
				showPreview:false,
				imageData:{}
			}
		},
		methods: {
			checkType(val) {
				 return this.$checkType(val)
			},
			init(){
				//调用此组件 请在nextTick 或异步 调用，否则currentIndex数据来不及刷新
				let data = this.data
				const imageArr = []
				this.data.map((item)=>{
					let furl = ''
					if(item.hasOwnProperty('url')){
						furl = item.url
					}else{
						furl = item
					}
					if(this.checkType(furl)=='video'){
						// furl = furl.split('?watermark')[0]
					}else{
						imageArr.push(furl)
					}
					
				})
				this.imageData = imageArr
				let url = imageArr[0]
				let index = 0
				if(this.currentIndex!=''){
					url = imageArr.find(item=>item==this.currentIndex)
					index = imageArr.findIndex(item=>item==this.currentIndex)
				}
				console.log('++++++++++++++++',this.data,imageArr)
				this.showPreviewAction(imageArr,index,url)
			},
			showPreviewAction(urls, index, url) {
				if (isQianfan()) {
					QFH5.viewImages(index, urls)
					return
				}
				else if (isWeiXin()) {
					wx.previewImage({
						current: url,
						urls: urls,
					})
					return
				}else{
					this.showPreview = true
				}
			}
		},
		mounted() {
			// this.init()
		},
	}
</script>

<style lang="scss" scoped>
.modal_showPreview{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
	z-index: 99;
	.content{
		// margin: 233rpx auto 0;
		// width: 640rpx;
		height: 520rpx;
		// background-size: cover;
		// border-radius: 20rpx;
		width: 100%;
		position: relative;
		top: 50%;
		transform: translateY(-50%);
		
		.swiper{
			width: 100%;
			height: 100%;
			// background: rgba(255,255,255,0.2);
			.swiper_content{
				width: 100%;
				image{
					width: 100%;
				}
				video{
					width: 100%;
				}
			}
		}
	}
}
</style>